//
//  WaveAnimationView.swift
//  MyAnimationDemo
//
//  Created by liy on 2025/2/11.
//

import SwiftUI

struct WaveAnimationView: View {
  // 波浪元素的数量
  private let numberOfElements = 10
  // 动画的持续时间
  private let animationDuration: Double = 1.0
  // 每个元素之间的延迟时间
  private let delayInterval: Double = 0.2
  // 用于触发动画的状态变量
  @State private var isAnimating = false

  var body: some View {
    HStack(spacing: 10) {
      ForEach(0 ..< numberOfElements, id: \.self) { index in
        Rectangle()
          .fill(Color.blue)
          .frame(width: 20, height: 80)
          .scaleEffect(self.isAnimating ? 1.5 : 1.0)
          .animation(
            Animation.easeInOut(
              duration: self.animationDuration
            )
            .repeatForever(autoreverses: true)
            .delay(Double(index) * self.delayInterval),
            value: self.isAnimating
          )
      }
    }.padding()
      .onAppear {
        // 当视图出现时，触发动画
        self.isAnimating = true
      }
  }
}

struct WaveView: View {
  @State private var isAni = false
  var body: some View {
    HStack(spacing: 20) {
      ForEach(1 ..< 20) { index in

        Rectangle()
          .fill(.orange)
          .frame(width: 20, height: 90)
          .scaleEffect(CGSizeMake(1, isAni ? 2 : 1))
          .animation(
            // 时间曲线
            .easeInOut(duration: 1)
              // 延迟
              .delay(Double(index) * 0.04)
              /* 重复 */
              .repeatForever(autoreverses: true),
            value: isAni
          )
      }
    }

    .onAppear {
      isAni = true
    }
  }
}

#Preview {
  Group {
    WaveAnimationView().padding(.bottom, 200)
    WaveView()
  }
}
